<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{
            height: 100%;
            width: 100%;
            padding: 0;
            margin: 0;
        }
        #layout_con{
            height: 100%;
            width: 100%;
        }
    </style>
    <link rel="stylesheet" href="//unpkg.com/iview/dist/styles/iview.css"></link>
</head>
<body>
    <div id="layout_con">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}">
            <i-menu active-name="1-2" theme="dark" width="auto" :open-names="['1']">
                <Submenu name="1">
                    <template slot="title">
                        <Icon type="ios-navigate"></Icon>
                        Item 1
                    </template>
                    <Menu-Item name="1-1">Option 1</Menu-Item>
                    <Menu-Item name="1-2">Option 2</Menu-Item>
                    <Menu-Item name="1-3">Option 3</Menu-Item>
                </Submenu>
                <Submenu name="2">
                    <template slot="title">
                        <Icon type="ios-keypad"></Icon>
                        Item 2
                    </template>
                    <Menu-Item name="2-1">Option 1</Menu-Item>
                    <Menu-Item name="2-2">Option 2</Menu-Item>
                </Submenu>
                <Submenu name="3">
                    <template slot="title">
                        <Icon type="ios-analytics"></Icon>
                        Item 3
                    </template>
                    <Menu-Item name="3-1">Option 1</Menu-Item>
                    <Menu-Item name="3-2">Option 2</Menu-Item>
                </Submenu>
            </i-menu>
        </Sider>
        <Layout :style="{marginLeft: '200px'}">
            <i-header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></i-header>
            <i-content :style="{padding: '0 16px 16px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <Breadcrumb-Item>Home</Breadcrumb-Item>
                    <Breadcrumb-Item>Components</Breadcrumb-Item>
                    <Breadcrumb-Item>Layout</Breadcrumb-Item>
                </Breadcrumb>
                <Card>
                    <div style="height: 600px">Content</div>
                </Card>
            </i-content>
        </Layout>
    </div>
    <script src="//vuejs.org/js/vue.min.js" type="text/javascript"></script>
    <script src="//unpkg.com/iview/dist/iview.min.js" type="text/javascript"></script>
    <script>
        new Vue({
            el: '#layout_con'
        })
    </script>
</body>
</html>